<!-- 搜索 -->
<template>
	<view class="container">
		<view class="uni-searchbox">
			<view class="uni-search-input">
				<icon type="search" :size='13' color='#333'></icon>
				<input confirm-type="search" placeholder="请输入搜索" :focus="true" auto-focus placeholder-class="uni-input-plholder"
				 class="uni-input" v-model.trim="key" @confirm="searchSubmit" />
				<icon type="clear" :size='13' color='#bcbcbc' @tap="cleanKey" v-show="key"></icon>
			</view>
		</view>

		<view class="uni-search-history">
			<view class="uni-history-header">
				<view class="uni-search-title">热门搜索</view>
				<icon type="delete" :size="13" color="#333"></icon>
			</view>
			<view class="uni-history-content" @tap="searchSubmit($event,'his')">
				<block v-for="(item,index) in history" :key="index">
					<view class="uni-tag" :hover-stay-time="150" :data-key="item.keywords">{{item.keywords}}</view>
				</block>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		searchList
	} from "@/api/public.js"
	import {
		searchKeyword
	} from '@/api/mall.js'
	const util = require("@/utils/util.js")
	export default {
		components: {},
		data() {
			return {
				history: [],
				key: "",
				showActionSheet: false,
				tips: "确认清空搜索历史吗？",
				searchList: [],
				type: null,
				intType: 1, // 线上线下热门搜索，1线下，2线上
			}
		},
		onLoad(options) {
			if (options.type) {
				this.intType = 2
				this.type = options.type;
				this.getMallHotList();
			} else {
				this.intType = 1
				this.getHotList();
			}
		},
		methods: {
			getMallHotList() {
				searchKeyword({
					type: this.intType
				}).then(res => {
					this.history.push.apply(this.history, res.data);
				})
			},
			getHotList() {
				searchList({
					type: this.intType
				}).then(res => {
					this.history.push.apply(this.history, res.data);
				})
			},
			back: function() {
				uni.navigateBack();
			},
			cleanKey: function() {
				this.key = ''
			},
			searchSubmit(e, str) { //搜索
				let key = e.target.dataset.key;
				if (this.type) { //mall
					if (str == 'his') {
						this.key = key;
					} 
					uni.navigateTo({
						// sid二级分类id
						url: '/mall/cate/list?key=' + this.key
					})

				} else {
					if (str == 'his') {
						this.key = key;
					}
					uni.navigateTo({
						url: `/pages/index/searchDetail?key=${this.key}`
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		color: #333;
		background: #fff;
	}

	.container {
		padding: 0 30rpx 30rpx 30rpx;
		box-sizing: border-box;

		.uni-searchbox {
			padding: 30rpx 0;
			box-sizing: border-box;
			display: flex;
			align-items: center;
		}

		.uni-search-input {
			width: 100%;
			height: 66rpx;
			border-radius: 35rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			background: #f2f2f2;
			display: flex;
			align-items: center;
			flex-wrap: nowrap;
		}
	}

	.uni-input {
		flex: 1;
		color: #333;
		padding: 0 16rpx;
		font-size: 28rpx;
	}

	.uni-input-plholder {
		font-size: 28rpx;
		color: #b2b2b2;
	}

	.uni-cancle {
		color: #888;
		font-size: 28rpx;
		padding-left: 30rpx;
		flex-shrink: 0;
	}

	.uni-history-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx 0;
	}

	.uni-history-content {
		display: flex;
		align-items: center;
		flex-wrap: wrap;

		.uni-tag {
			transform: scale(1);
			display: flex;
			align-items: center;
			justify-content: center;
			border-radius: 6rpx;
			font-size: 28rpx;
			padding: 16rpx 26rpx;
			line-height: 28rpx;
			margin: 0 24rpx 24rpx 0;
			background-color: #ededed !important;
			border-radius: 50rpx;
		}
	}

	.uni-icon-delete {
		padding: 10rpx;
		font-size: 28rpx;
	}

	.uni-search-title {
		font-size: 28rpx;
		font-weight: bold;
	}

	.uni-hot-header {
		padding: 30rpx 0;
	}

	.uni-header {
		padding: 26rpx 0;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.uni-header-left {
		font-size: 30rpx;
		color: #222;
		border-left: 4rpx solid #EB0909;
		padding-left: 10rpx;
		word-break: break-all;
	}

	.uni-noboredr {
		border-left: 0 !important;
	}

	.uni-result-box {
		font-size: 28rpx;
	}

	.uni-result-item {
		line-height: 28rpx;
		padding: 28rpx 0;
	}
</style>
